<template>
	<view class="content">
		<view class="search">
			<uni-search-bar
				v-model="searchValue"
				class="uni-mt-10"
				radius="100"
				placeholder="搜索"
				clearButton="none"
				cancelButton="none"
				@confirm="search"
			/>
		</view>
		<view class="post">
			<van-tabs
				animated
				sticky
				color="#4177f6"
				:active="active"
				@change="tabChange"
			>
				<van-tab title="未开始" name="approved">
					<view v-if="!isLoading" class="post-content">
						<template v-for="item in eventList" :key="item.id">
							<ActivityItem :event="item" />
						</template>
					</view>
				</van-tab>
				<van-tab title="进行中" name="ongoing">
					<view v-if="!isLoading" class="post-content">
						<template v-for="item in eventList" :key="item.id">
							<ActivityItem :event="item" />
						</template>
					</view>
				</van-tab>
				<van-tab title="已结束" name="finished">
					<view v-if="!isLoading" class="post-content">
						<template v-for="item in eventList" :key="item.id">
							<ActivityItem :event="item" />
						</template>
					</view>
				</van-tab>
			</van-tabs>
		</view>
		<uni-load-more v-if="isLoading" class="loading" status="loading" />
		<van-empty description="暂无活动" v-if="!eventList.length" />
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { onReachBottom } from '@dcloudio/uni-app'

import ActivityItem from '@/components/activity-item/activity-item.vue'
import useEventStore from '@/store/event.js'

/** 活动相关 */
const active = ref('approved')
// 搜索活动
const searchValue = ref('')
// 控制加载是否显示
const isLoading = ref(false)
const limit = ref(5)
async function search() {
	isLoading.value = true
	await eventStore.getEventAction({
		eventName: searchValue.value,
		status: active.value
	})
	isLoading.value = false
}
const eventStore = useEventStore()
const { eventList } = storeToRefs(eventStore)
onMounted(() => {
	eventStore.getEventAction({ limit: limit.value, status: active.value })
})
onReachBottom(() => {
	limit.value = limit.value + 5
	eventStore.getEventAction({ limit: limit.value, status: active.value })
})
function tabChange(e) {
	active.value = e.detail.name
	limit.value = 5
	eventStore.getEventAction({ limit: 5, status: e.detail.name })
}
</script>

<style lang="less">
.search {
	position: relative;
	background-color: #fff;
}
.card-actions {
	display: flex;
	justify-content: space-between;
	border-top: 2px solid #f2f2f2;
}
.post {
	padding: 0 10rpx;
}
.loading {
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: rgba(0, 0, 0, 0.6);
}
</style>
